<template>
    <body id="poster" :class="dongtai">
      <el-form class="login-container" label-position="left" label-width="0px">
        <h3 class="login_title">系统登录</h3>
        <el-form-item>
          <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
  
        <el-form-item>
          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
  
        <el-form-item style="width: 100%">
          <!-- <el-button type="primary" class="l-btnlog" v-on:click="login" @keyup.enter.native="loginLison">登 录
          </el-button> -->
          <el-button type="primary" class="l-btnlog" v-on:click="login">登 录
          </el-button>
        </el-form-item>
      </el-form>
  
    </body>
  </template>
  
  
  <script>
  import router from "@/router";
  import { Login } from "@/service/systemapi";
  export default {
    name: "wxllogin",
    data() {
      return {
        bglist:['bg2','bg1','bg3','bg4','bg5','bg6','bg7','bg8','bg9','bg10','bg11','bg12','bg13','bg14','bg15','bg16','bg17','bg18','bg19'],
        bgindex:0,
        dongtai:'bg2',
        loginForm: {
          username: "",
          password: "",
        },
        responseResult: [],
      };
    },
    created() {
      this.keyupSubmit();
  
      if (process.env.NODE_ENV === 'development') {
        this.loginForm.username = "admin";
        this.loginForm.password = "admin123";
      }

      var that=this;
      setInterval(function(){
        that.autoBgm();
      },5000);
      
    },
    methods: {
      autoBgm(){

        //bglist //bgindex  dongtai

        this.bgindex = this.bgindex +1;
        if (this.bgindex>=19) {
          this.bgindex=0;
        }

        this.dongtai=this.bglist[this.bgindex];
         // $("#poster").css('background','url("../../assets/images/1.jpg") no-repeat');
      },
      //监听
      loginLison() {
        // document.onkeyup =e =>{
        //     debugger
        //     if (e.keyCode==13 ){ 
        //         debugger
        //         if ( this.$route.path =="/login") {//保险一点
        //             this.login();
        //         }
  
        //     }
  
        // }
      },
      login() {
        Login( this.loginForm.username,this.loginForm.password)
          .then((res) => {
            if (res.success) {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("userName", res.data.name);
              localStorage.setItem("accountNo", res.data.accountNo);
              localStorage.setItem("userPower", res.data.power);
              // localStorage.setItem("isOALogin", "0");
              router.push("/welcomexczx");
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error("系统异常");
            console.log(err);
          });
      },
      keyupSubmit() {
        document.onkeydown = (e) => {
          let _key = window.event.keyCode;
          //!this.clickState是防止用户重复点击回车&& !this.clickState
          if (_key === 13) {
  
            if (this.$route.path == "/login") {//保险一点
              this.login();
            }
          }
        };
      },
    },
  };
  </script>
  
  <style scoped>
  .l-btnlog {
    width: 100%;
    /* background: #2673c7; */
    background: #cdd8e5;
    border: none;
    font-weight: bold;
    font-size: 20px;
    color: #867e7e;
  }
  
  .l-btnlog:hover {
    /* background: rgb(86, 86, 88); */
    background: #dfe2e5;
  }
  
  .bg1{
     background: url("../../assets/images/1.jpg") no-repeat;
  }
  .bg2{
     background: url("../../assets/images/2.jpg") no-repeat;
  }
  .bg3{
     background: url("../../assets/images/3.jpg") no-repeat;
  }
  .bg4{
     background: url("../../assets/images/4.jpg") no-repeat;
  }
  .bg5{
     background: url("../../assets/images/5.jpg") no-repeat;
  }
  .bg6{
     background: url("../../assets/images/6.jpg") no-repeat;
  }
  .bg7{
     background: url("../../assets/images/7.jpg") no-repeat;
  }
  .bg8{
     background: url("../../assets/images/8.jpg") no-repeat;
  }
  .bg9{
     background: url("../../assets/images/9.jpg") no-repeat;
  }
  .bg10{
     background: url("../../assets/images/10.jpg") no-repeat;
  }
  .bg11{
     background: url("../../assets/images/11.jpg") no-repeat;
  }
  .bg12{
     background: url("../../assets/images/12.jpg") no-repeat;
  }
  .bg13{
     background: url("../../assets/images/13.jpg") no-repeat;
  }
  .bg14{
     background: url("../../assets/images/14.jpg") no-repeat;
  }
  .bg15{
     background: url("../../assets/images/15.jpg") no-repeat;
  }
  .bg16{
     background: url("../../assets/images/16.jpg") no-repeat;
  }
  .bg17{
     background: url("../../assets/images/17.jpg") no-repeat;
  }
  .bg18{
     background: url("../../assets/images/18.jpg") no-repeat;
  }
  .bg19{
     background: url("../../assets/images/19.jpg") no-repeat;
  }
  #poster {
    /* background: url("../../assets/images/19.jpg") no-repeat; */
    background-color: #4574a3;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  
  body {
    margin: 0px;
    padding: 0;
  }
  
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 230px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    /* background: #fff; */
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #eaeaea;
    /* box-shadow: 0 0 25px #cac6c6; */
  
    /* box-shadow:
      5px 5px 12px rgba(0, 0, 0, .4),
      -1px -1px 12px rgba(255, 255, 255, .9); */
  
      box-shadow:
      5px 5px 12px rgba(255, 255, 255, .9),
      -1px -1px 12px rgba(255, 255, 255, .9);
  }
  
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    /* color: #505458; */
    color: #fff;
  }
  </style>